<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>vfd-cloud - 保存文件</title>
    <!-- Custom fonts for this template-->
    <link th:href="@{/asserts/vendor/fontawesome-free/css/all.min.css}" rel="stylesheet" type="text/css">
    <link
            href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
            rel="stylesheet">

    <!-- Custom styles for this template-->
    <link th:href="@{/asserts/css/sb-admin-2.min.css}" rel="stylesheet">

    <style type="text/css">
        table{
            width:70%;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);/* 阴影 */
            border-collapse:collapse;/* 取消表格边框 */
            letter-spacing:1px;/* 文字缩进 */
        }
        table,th,tr,td {
            border-bottom: 1px solid #dedede; /* 表格横线 */
            padding: 29px;
            text-align: center;
        }
        ul li {
            list-style: none;
        }
        .addBtn{
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: #D4D7D7;
            position: relative;
            cursor: pointer;
        }
        .addBtn::before{
            content: '';
            width: 8px;
            height: 2px;
            background-color: #fff;
            position: absolute;
            top: 7px;
            left: 4px;
        }
        .addBtn::after{
            content: '';
            width: 2px;
            height: 8px;
            background-color: #fff;
            position: absolute;
            top: 4px;
            left: 7px;
        }
        .addBtn:hover{
            background-color: #00C8C8;
        }


        .subBtn{
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: #D4D7D7;
            position: relative;
            cursor: pointer;
        }

        .subBtn::before{
            content: '';
            width: 8px;
            height: 2px;
            background-color: #fff;
            position: absolute;
            top: 7px;
            left: 4px;
        }
        .subBtn:hover{
            background-color: #00C8C8;
        }
        a{text-decoration:none}
        a:hover{
            text-decoration:none;
        }

    </style>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

</head>
<body id="page-top">
    <!-- Page Wrapper -->
    <div id="wrapper">
        <!-- Content Wrapper -->
        <div id="content-wrapper" class="d-flex flex-column">

            <!-- Main Content -->
            <div id="content">
                <!-- Topbar -->
                <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">

                    <!-- Sidebar Toggle (Topbar) -->
                    <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
                        <i class="fa fa-bars"></i>
                    </button>
                    <!-- Topbar Navbar -->
                    <ul class="navbar-nav ml-auto">
                        <!-- Nav Item - Search Dropdown (Visible Only XS) -->
                        <li class="nav-item dropdown no-arrow d-sm-none">
                            <a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button"
                               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="fas fa-search fa-fw"></i>
                            </a>
                            <!-- Dropdown - Messages -->
                            <div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in"
                                 aria-labelledby="searchDropdown">
                                <form class="form-inline mr-auto w-100 navbar-search">
                                    <div class="input-group">
                                        <input type="text" class="form-control bg-light border-0 small"
                                               placeholder="Search for..." aria-label="Search"
                                               aria-describedby="basic-addon2">
                                        <div class="input-group-append">
                                            <button class="btn btn-primary" type="button">
                                                <i class="fas fa-search fa-sm"></i>
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </li>

                        <!-- Nav Item - User Information -->
                        <li class="nav-item dropdown no-arrow">
                            <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button"
                               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <!--用户名-->
                                <span id="curr_user_name" class="mr-2 d-none d-lg-inline text-gray-600 small" th:text="${userName}"></span>
                                <img class="img-profile rounded-circle"
                                     src="/asserts/img/undraw_profile.svg">
                            </a>
                            <!-- Dropdown - User Information -->
                            <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in"
                                 aria-labelledby="userDropdown">
                                <a class="dropdown-item" href="#" data-toggle="modal" data-target="#tipModal">
                                    <i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
                                    Profile
                                </a>
                                <a class="dropdown-item" href="#" data-toggle="modal" data-target="#tipModal">
                                    <i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
                                    Settings
                                </a>
                                <a class="dropdown-item" href="#" data-toggle="modal" data-target="#tipModal">
                                    <i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
                                    Activity Log
                                </a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
                                    <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
                                    退出
                                </a>
                            </div>
                        </li>
                    </ul>
                </nav>
                <!-- End of Topbar -->

                <!-- Begin Page Content -->
                <div class="container-fluid">

                    <!-- Page Heading -->
                    <div class="d-sm-flex align-items-center justify-content-between mb-4">
                        <h3 class="h3 mb-0 text-gray-800"><p th:text="'文件分享者： '+ ${ownerName}"></p></h3>
                        <a th:if="${#strings.isEmpty(self)}" href="javascript:void(0);" class="btn btn-success btn-icon-split btn-sm" data-toggle="modal" data-target="#fileTreeModal"
                           th:onclick="get_sub_dir(-1*[[${id}]],[[${id}]],0)">
                                        <span class="icon text-white-50">
                                            <i class="fas fa-save"></i>
                                        </span>
                            <span class="text">保存到我的云盘</span>
                        </a>
                    </div>
                </div>

                <!--导航栏-->
                <div class="card shadow mb-4">
                    <div class="card-header py-3 float-left" th:if="${currentDir}">
                        <h5 class="m-0 font-weight-bold text-primary">
                            <div class="float-left" id="guide">
                                <div class="float-left" th:each="pa:${path}">
                                    <a th:text="${pa.getName()}" href="javascript:void(0)" th:onclick="enter_into_dir([[${pa.getOwner()}]],[[${pa.getId()}]],[[${pa.getPid()}]]);">
                                    </a> >
                                </div>
                                <div class="float-left">
                                    <p th:text="'&nbsp;' + ${currentDir.getName()}"></p>
                                </div>
                            </div>
                        </h5>
                    </div>

                    <div class="card-body card mb-4 py-3 border-left-primary">
                        <div class="table-responsive">
                            <table class="table" id="dataTable" width="100%" cellspacing="0">
                                <thead>
                                <tr>
                                    <th></th>
                                    <th>文档名</th>
                                    <th>长度</th>
                                    <th>有效期</th>
                                </tr>
                                </thead>
                                <tfoot>
                                <tr>
                                    <th></th>
                                    <th>文档名</th>
                                    <th>长度</th>
                                    <th>有效期</th>
                                </tr>
                                </tfoot>
                                <tbody id="dir_tbody">
                                    <tr th:each="dir:${dirs}" th:id="'tr' + ${dir.getId()}">
                                        <td>
                                            <span class="icon">
                                                <i style="color: lightskyblue" class="fas fa-folder fa-2x"></i>
                                            </span>
                                        </td>
                                        <td>
                                            <a href="javascript:void(0)" th:onclick="enter_into_dir([[${dir.getOwner()}]],[[${dir.getId()}]],
                                            [[${dir.getPid()}]],[[${file.getId()}]],[[${file.getOwner()}]],[[${file.getPid()}]],[[${expire}]]);">
                                                <span class="h5 m-0 text-sm-center" th:text="${dir.getName()}"></span>
                                            </a>
                                        </td>
                                        <td><span class="h5 m-0 text-dark" th:text="'--'"></span></td>         <!--文件夹长度不显示-->
                                        <td><span class="h5 m-0 text-dark" th:text="${expire}+'天'"></span></td>
                                    </tr>
                                </tbody>

                                <tbody id="doc_tbody">
                                    <tr th:each="doc:${docs}" th:id="'tr' + ${doc.getId()}">
                                        <td>
                                            <span th:if="${doc.getType()==1}" class="icon">
                                                <i style="color: cornflowerblue" class="fas fa-file-alt fa-2x"></i>
                                            </span>
                                            <span th:if="${doc.getType()==2}" class="icon">
                                                <i style="color: #09cb09" class="fas fa-image fa-2x"></i>
                                            </span>
                                            <span th:if="${doc.getType()==3}" class="icon">
                                                <i style="color: blueviolet" class="fas fa-video fa-2x"></i>
                                            </span>
                                            <span th:if="${doc.getType()==4}" class="icon">
                                                <i style="color: deeppink" class="fas fa-music fa-2x"></i>
                                            </span>
                                            <span th:if="${doc.getType()==5}" class="icon">
                                                <i style="color: #069706" class="fas fa-file-code fa-2x"></i>
                                            </span>
                                            <span th:if="${doc.getType()==6}" class="icon">
                                                <i style="color: gray" class="fas fa-file fa-2x"></i>
                                            </span>
                                        </td>
                                        <td>
                                            <span class="h5 m-0 text-dark" th:text="${doc.getName()}"></span>
                                        </td>
                                        <td><span class="h5 m-0 text-dark" th:text="${doc.convertToSize()}"></span></td>
                                        <td><span class="h5 m-0 text-dark" th:text="${expire} + '天'"></span></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End of Main Content -->
            <!-- Footer -->
            <footer class="sticky-footer bg-white">
                <div class="container my-auto">
                    <div class="copyright text-center my-auto">
                        <span>Copyright &copy; <a href="http://www.vfdxvffd.cn">vfdxvffd.cn</a> 2021</span>
                    </div>
                </div>
            </footer>
            <!-- End of Footer -->

        </div>
    </div>

    <!-- Scroll to Top Button-->
    <a class="scroll-to-top rounded" href="#page-top">
        <i class="fas fa-angle-up"></i>
    </a>

    <!-- fileTree Modal-->
    <div th:if="${not #strings.isEmpty(id)}" class="modal fade" id="fileTreeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="ModalLabel">保存文件</h5>
                    <button class="close" type="button" th:onclick="close_modal([[${id}]]);" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="keep_file" action="/keep_file" method="post">
                        <input style="display: none" name="id" th:value="${file.getId()}">
                        <input style="display: none" name="fid" th:value="${file.getPid()}">
                        <input style="display: none" name="owner" th:value="${file.getOwner()}">
                        <div>
                            <ul id="ul0">
                                <li th:if="${not #strings.isEmpty(id)}" th:id="'li_'+${id}*-1+'_'+${id}+'_0'">
                                    <a title="展开" class="float-left" th:id="'open_'+${id}*-1+'_'+${id}+'_0'" style="display: none" href="javascript:void(0);"
                                       th:onclick="get_sub_dir([[-1*${id}]],[[${id}]],0)">
                                        <div class="addBtn"></div></a>
                                    <a title="收起" class="float-left" th:id="'close_'+${id}*-1+'_'+${id}+'_0'" style="display: block" href="javascript:void(0);"
                                       th:onclick="close_sub_dir([[-1*${id}]],[[${id}]],0)">
                                        <div class="subBtn"></div></a>
                                    <input type="radio" name="targetDir" id="targetDir" th:value="-1*${id}+'_'+${id}+'_0'" />
                                    <label class="custom-radio" for="targetDir">
                                        <span th:id="'icon_'+${id}*-1+'_'+${id}+'_0'" class="icon">
                                            <i style="color: lightskyblue" class="fas fa-folder-open"></i>
                                        </span>全部文件
                                    </label>
                                </li>
                            </ul>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button id="fileTreeButton" class="btn btn-secondary" th:onclick="close_modal([[${id}]]);" type="button" data-dismiss="modal">取消</button>
                    <a th:onclick="save_file_check([[${id}]],[[${file.getOwner()}]]);"
                       class="btn btn-primary" href="javascript:void(0)">确认</a>
                </div>
            </div>
        </div>
    </div>

    <!-- warning Modal-->
    <div class="modal fade" id="warningModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="warningModalLabel">错误</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">不能保存自己分享的文件哦，文件的复制和移动功能正在开发中...</div>
                <div class="modal-footer">
                    <button class="btn btn-primary" type="button" data-dismiss="modal">确认</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Logout Modal-->
    <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="logoutModalLabel">退出登陆？</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">选择“退出”即可退出当前帐号</div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">取消</button>
                    <a class="btn btn-primary" href="/logout">退出</a>
                </div>
            </div>
        </div>
    </div>
    <!-- info Modal-->
    <div class="modal fade" id="tipModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">In Plan</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <!--Select "Logout" below if you are ready to end your current session.-->
                <div class="modal-body">此功能正在加紧开发中...</div>
                <div class="modal-footer">
                    <!--<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>-->
                    <button class="btn btn-primary" type="button" data-dismiss="modal">确认</button>
                    <!--<a class="btn btn-primary" href="login.html">Logout</a>-->
                </div>
            </div>
        </div>
    </div>

    <!-- login Modal-->
    <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="loginModalLabel">登录</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form class="user" id="user_share_login" method="post" action="/shareLogin">
                        <div class="form-group" id="login_info">

                        </div>
                        <div class="form-group">
                            <input type="email" class="form-control form-control-user"
                                   id="inputEmail" name="inputEmail" aria-describedby="emailHelp"
                                   placeholder="输入邮箱地址...">
                        </div>
                        <div class="form-group">
                            <input type="password" class="form-control form-control-user"
                                   id="inputPassword" name="inputPassword" placeholder="密码">
                        </div>
                        <div class="form-group">
                            <div class="custom-control custom-checkbox small">
                                <input type="checkbox" class="custom-control-input" name="customCheck" id="customCheck">
                                <label class="custom-control-label" for="customCheck">7天免登录</label>
                                <input type="hidden" name="customCheck">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">取消</button>
                    <a class="btn btn-primary" href="javascript:void(0);" th:onclick="share_login([[${uuid}]],[[${pass}]],[[${sharer}]])">登录</a>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="duplicateModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="duplicateModalLabel">保存文件</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">保存的位置已经包含了同名的文件，请选择您的操作：
                    <div>
                        已有文件：
                        <div id="exist_name"></div>
                        <div id="exist_date"></div><br>
                        正在保存文件：
                        <div id="keep_name"></div>
                        <div id="keep_date"></div>
                    </div>
                    替换文件：将覆盖已有文件
                    保留两个文件：将重命名已有文件
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">取消</button>
                    <a class="btn btn-danger" href="javascript:void(0);" onclick="save_file_cover()">替换文件</a>
                    <a class="btn btn-primary" href="javascript:void(0);" onclick="save_file_rename()">保留两个文件</a>
                </div>
            </div>
        </div>
    </div>

    <script th:src="@{/asserts/vendor/jquery/jquery.min.js}"></script>
    <script th:src="@{/asserts/vendor/bootstrap/js/bootstrap.bundle.min.js}"></script>

    <!-- Core plugin JavaScript-->
    <script th:src="@{/asserts/vendor/jquery-easing/jquery.easing.min.js}"></script>

    <!-- Custom scripts for all pages-->
    <script th:src="@{/asserts/js/sb-admin-2.min.js}"></script>

    <!-- Page level plugins -->
    <script th:src="@{/asserts/vendor/chart.js/Chart.min.js}"></script>

    <!-- Page level custom scripts -->
    <script th:src="@{/asserts/js/demo/chart-area-demo.js}"></script>
    <script th:src="@{/asserts/js/demo/chart-pie-demo.js}"></script>

</body>

<script type="text/javascript">

    function close_modal(id) {
        const li_id = "li_" + (id * -1) + "_" + id + "_0";
        const open_id = "open_" + (id * -1) + "_" + id + "_0";
        const close_id = "close_" + (id * -1) + "_" + id + "_0";
        $('#'+li_id+' ul').remove();
        document.getElementById(open_id).style.display="none";
        document.getElementById(close_id).style.display="block";
    }

    function save_file_check(id, file_owner) {
        if (file_owner === id) {
            $('#warningModal').modal("show");
            return false;
        } else {
            $.ajax({
                type: "GET",
                url: "/checkShareDuplicate",
                data: $('#keep_file').serialize(),
                cache: false,
                dataType: "json",
                success: function (result) {
                    if ("dup" in result) {
                        alert('保存的文件已存在');
                        return false;
                    }
                    if ("self" in result) {
                        if ("exist" in result) {
                            const exist = result.exist;
                            document.getElementById('exist_name').value = exist.name;
                        }
                        if ("keep" in result) {
                            const keep = result.keep;
                            document.getElementById('keep_name').value = keep.name;
                        }
                        $('#duplicateModal').modal('show');
                    } else {
                        document.getElementById('keep_file').action="/keep_file";
                        document.getElementById('keep_file').submit();
                    }
                    return false;
                },
                error: function (msg) {
                    alert("发生错误");
                    return false;
                }
            });
        }
    }

    function save_file_cover() {
        document.getElementById('keep_file').action = "/keepFileWithCover";
        document.getElementById('keep_file').submit();
    }

    function save_file_rename() {
        document.getElementById('keep_file').action = "/keepFileWithRename";
        document.getElementById('keep_file').submit();
    }

    function share_login(uuid, pass, sharer) {
        document.getElementById('login_info').innerHTML="";
        $.ajax({
            type: "post",
            url: "/shareLogin",
            data: $('#user_share_login').serialize(),
            cache: false,
            dataType: "text",
            success: function (result) {
                if (result === "success") {
                    var params = {
                        "uuid": uuid,
                        "pass": pass,
                        "sharer": sharer
                    };
                    httpPost("/preserve-file",params);
                    return false;
                } else {
                    document.getElementById('login_info').innerHTML="<p style=\"color: red\"\">" + result + "</p>";
                }
            }
        });
    }

    function close_sub_dir(id, owner, fid) {
        document.getElementById("open_" + id + "_" + owner + "_" + fid).style.display="block";
        document.getElementById("close_" + id + "_" + owner + "_" + fid).style.display="none";
        const icon = document.getElementById("icon_" + id + "_" + owner + "_" + fid);
        icon.innerHTML = "<i style=\"color: lightskyblue\" class=\"fas fa-folder\"></i>";
        const element_id = "li_" + id + "_" + owner + "_" + fid;
        $('#'+element_id+' ul').remove();
    }

    function get_sub_dir(id, owner, fid) {
        if (owner == null) {
            $('#loginModal').modal("show");
            return false;
        }
        var element_id = "li_" + id + "_" + owner + "_" + fid;
        var dir_con = document.getElementById(element_id);
        var dir_html = dir_con.innerHTML + "<ul>";
        $.ajax({
            type: "post",
            url: "/enterFile",
            data: {id: owner, fid: id, pid: fid},
            cache: false,
            dataType: "json",
            success: function (result) {
                console.log(result);
                var dirList = result.dirs;
                //文件夹this.name+     id=\"targetDir_"+this.id+"_"+this.owner+"_"+this.pid+"\"
                $.each(dirList, function () {
                    dir_html +=
                        "        <li id=\"li_"+this.id+"_"+this.owner+"_"+this.pid+"\"><div>"+
                        "        <div class='float-left'><a title=\"展开\" id=\"open_"+this.id+"_"+this.owner+"_"+this.pid+"\" style=\"display: block\" href=\"javascript:void(0);\" onclick=\"get_sub_dir("+this.id+","+this.owner+","+this.pid+")\"><div class=\"addBtn\"></div></a></div>"+
                        "        <div class='float-left'><a title=\"收起\" id=\"close_"+this.id+"_"+this.owner+"_"+this.pid+"\" style=\"display: none\" href=\"javascript:void(0);\" onclick=\"close_sub_dir("+this.id+","+this.owner+","+this.pid+")\"><div class=\"subBtn\"></div></a></div>"+
                        "        <div ><input type=\"radio\" name=\"targetDir\" id=\"targetDir_"+this.id+"_"+this.owner+"_"+this.pid+"\" value=\""+this.id+"_"+this.owner+"_"+this.pid+"\"/>"+
                        "        <label class=\"custom-radio\" for=\"targetDir_"+this.id+"_"+this.owner+"_"+this.pid+"\">" +
                        "        <span id=\"icon_"+this.id+"_"+this.owner+"_"+this.pid+"\" class=\"icon\">\n" +
                        "             <i style=\"color: lightskyblue\" class=\"fas fa-folder\"></i>\n" +
                        "        </span>"+this.name+"</label></div>"+
                        "        </div></li>";
                });
                dir_html += "</ul>";
                //alert(dir_html);
                dir_con.innerHTML = dir_html;
                document.getElementById("open_" + id + "_" + owner + "_" + fid).style.display="none";
                document.getElementById("close_" + id + "_" + owner + "_" + fid).style.display="block";
                const icon = document.getElementById("icon_" + id + "_" + owner + "_" + fid);
                icon.innerHTML = "<i style=\"color: lightskyblue\" class=\"fas fa-folder-open\"></i>";
            }
        });
    }

    function enter_into_dir(id, fid, pid, start_id, start_owner, start_fid, expire) {
        var guide_con = document.getElementById('guide');
        var guide_html = "";
        var dir_con = document.getElementById('dir_tbody');
        var dir_html = "";
        var doc_con = document.getElementById('doc_tbody');
        var doc_html = "";
        $.ajax({
            type: "post",
            url: "/enterFile",
            data: {id: id, fid: fid, pid: pid},
            cache: false,
            dataType: "json",
            success: function (result) {
                const pathList = result.path;
                const dirList = result.dirs;
                const currDir = result.currentDir;
                const docList = result.docs;
                let flag = false;
                //导航栏
                $.each(pathList, function () {
                    if (this.id === start_id && this.owner === start_owner && this.pid === start_fid) {
                        flag = true;
                    }
                    if (flag) {
                        guide_html += "<div class=\"float-left\">"+
                            "                <a href=\"javascript:void(0)\" onclick=\"enter_into_dir("+this.owner+","+this.id+","+this.pid+","+start_id+","+start_owner+","+start_fid+","+expire+");\">" +
                            "                <p>"+this.name+" ></p></a>" +
                            "</div>";
                    }
                });
                guide_html += "<div class=\"float-left\">" +
                    "        <p>&nbsp;"+currDir.name+"</p>" +
                    "    </div>";
                guide_con.innerHTML = guide_html;
                //文件夹
                $.each(dirList, function () {
                    dir_html += dir_string(this, expire, start_id, start_owner, start_fid);
                    // dir_html += "<tr id=\"tr"+this.id+"\">"+
                    //     "<td>"+
                    //     "<a href=\"javascript:void(0)\" onclick=\"enter_into_dir("+this.owner+","+this.id+","+this.pid+","+start_id+","+start_owner+","+start_fid+","+expire+");\">" +
                    //     "               <p>"+this.name+"</p>" +
                    //     "           </a>" +
                    //     "       </td>" +
                    //     "       <td>--</td>" +
                    //     "       <td>"+ expire +"天</td>" +
                    //     "   </tr>";
                });
                dir_con.innerHTML = dir_html;
                //文件
                $.each(docList, function () {
                    doc_html += doc_string(this, expire);
                    // doc_html += "<tr id=\"tr"+this.id+"\">"+
                    //     "<td><p>"+this.name+"</p></td>"+
                    //     "<td>"+getFileSize(this.len)+"</td>"+
                    //     "<td>"+ expire +"天</td></tr>";
                });
                doc_con.innerHTML = doc_html;
            }
        });
    }

    //发送POST请求跳转到指定页面
    function httpPost(URL, PARAMS) {
        var temp = document.createElement("form");
        temp.action = URL;
        temp.method = "post";
        temp.style.display = "none";

        for (var x in PARAMS) {
            var opt = document.createElement("textarea");
            opt.name = x;
            opt.value = PARAMS[x];
            temp.appendChild(opt);
        }

        document.body.appendChild(temp);
        temp.submit();

        return temp;
    }

    function getFileSize(fileByte) {
        var fileSizeByte = fileByte;
        var fileSizeMsg = "";
        if(fileSizeByte < 1024){
            fileSizeMsg = fileSizeByte  + "B";
        }else if (fileSizeByte < 1048576) {
            fileSizeMsg = window.parseFloat(((fileSizeByte / 1024)).toFixed(2)) + "KB";
        }else if (fileSizeByte === 1048576) {
            fileSizeMsg = "1MB";
        }else if (fileSizeByte > 1048576 && fileSizeByte < 1073741824){
            fileSizeMsg = window.parseFloat(((fileSizeByte / (1024 * 1024))).toFixed(2)) + "MB";
        }else if (fileSizeByte > 1048576 && fileSizeByte === 1073741824){
            fileSizeMsg = "1GB";
        }else if (fileSizeByte > 1073741824 && fileSizeByte < 1099511627776){
            fileSizeMsg = window.parseFloat(((fileSizeByte / (1024 * 1024 * 1024))).toFixed(2)) + "GB";
        }else{
            fileSizeMsg = "文件超过1TB";
        }
        return fileSizeMsg;
    }

    function doc_string(obj, expire) {
        let str = "<tr id=\"tr"+obj.id+"\"><td>";
        if (obj.type === 1) {
            str += "<span class=\"icon\">" +
                "     <i style=\"color: cornflowerblue\" class=\"fas fa-file-alt fa-2x\"></i>" +
                "</span>";
        } else if (obj.type === 2) {
            str += "<span class=\"icon\">\n" +
                "    <i style=\"color: #09cb09\" class=\"fas fa-image fa-2x\"></i>\n" +
                "</span>";
        } else if (obj.type === 3) {
            str += "<span class=\"icon\">\n" +
                "    <i style=\"color: blueviolet\" class=\"fas fa-video fa-2x\"></i>\n" +
                "</span>";
        } else if (obj.type === 4) {
            str += "<span class=\"icon\">\n" +
                "    <i style=\"color: deeppink\" class=\"fas fa-music fa-2x\"></i>\n" +
                "</span>";
        } else if (obj.type === 5) {
            str += "<span class=\"icon\">\n" +
                "    <i style=\"color: #069706\" class=\"fas fa-file-code fa-2x\"></i>\n" +
                "</span>";
        } else if (obj.type === 6) {
            str += "<span class=\"icon\">\n" +
                "    <i style=\"color: gray\" class=\"fas fa-file fa-2x\"></i>\n" +
                "</span>";
        }
        str += "</td>"+
            "<td><span class=\"h5 m-0 text-dark\">" + obj.name + "</span></td>" +
            "<td><span class=\"h5 m-0 text-dark\">" + getFileSize(obj.len) + "</span></td>" +
            "<td><span class=\"h5 m-0 text-dark\">" + expire + "天</span></td></tr>";
        return str;
    }

    function dir_string(obj, expire, start_id, start_owner, start_fid) {
        return "<tr id=\"tr"+obj.id+"\">"+
            "<td>" +
            "    <span class=\"icon\">" +
            "         <i style=\"color: lightskyblue\" class=\"fas fa-folder fa-2x\"></i>" +
            "    </span>" +
            "</td>"+
            "<td>"+
            "<a title=\"进入文件夹\" href=\"javascript:void(0)\" onclick=\"enter_into_dir("+obj.owner+","+obj.id+","+obj.pid+","+start_id+","+start_owner+","+start_fid+","+expire+");\">" +
            "               <span class='h5 m-0 text-sm-center'>"+obj.name+"</span>" +
            "           </a>" +
            "       </td>" +
            "       <td><span class=\"h5 m-0 text-dark\">--</span></td>" +
            "       <td><span class=\"h5 m-0 text-dark\">"+ expire +"天</span></td>" +
            "   </tr>";
    }

</script>

</html>